<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<style>
  li {
    list-style: none;
  }

  .msg-header {
    background-color: white;
    height: 60px;
    display: flex;
    align-items: center;
    padding: 10px 20px;
    border-bottom: 1px solid #ccc;

    .avatar {
      width: 60px;
      height: 60px;
      margin-right: 20px;
    }
  }

  .nav {
    width: 100%;
    background-color: white;
    float: left;
    margin-bottom: 20px;
  }

  .nav ul {
    margin: 0;
    padding: 0;
  }

  .nav ul li {
    float: left;
  }

  .nav-item a {
    display: block;
    height: 50px;
    line-height: 50px;
    padding: 0 10px;
    margin: 0 20px;
    text-decoration: none;
    font-size: 14px;
    color: black;
  }

  .nav-item a:hover {
    border-bottom: 2px solid #007bff;
  }

  #a-current a {
    border-bottom: 2px solid #007bff;
  }
</style>

<div class="msg-header">
  <img class="avatar" src="assets/file_imgs/账号管理.png" alt="账号管理">
  <span>账号管理</span>
</div>

<div class="nav">
  <ul>
    <li class="nav-item"><a href="javascript:void(0)">基本信息</a></li>
    <li class="nav-item"><a href="javascript:void(0)">修改头像</a></li>
    <li class="nav-item"><a href="javascript:void(0)">修改密码</a></li>
  </ul>
</div>

<script>
  function setNaxIndex() {
    var items = document.getElementsByClassName('nav-item')
    for (let i = 0; i < items.length; i++) {
      items[i].setAttribute('index', i)
    }
    items[0].id = 'a-current'
  }


  var items = document.getElementsByClassName('nav-item')
  var mains = document.getElementsByClassName('nav-main')
  for (let i = 0; i < items.length; i++) {
    items[i].onclick = function () {
      for (let i = 0; i < items.length; i++) {
        items[i].id = ''
      }
      this.id = 'a-current'
      var index = this.getAttribute('index')
      for (let i = 0; i < mains.length; i++) {
        mains[i].style.display = 'none'
      }
      mains[index].style.display = 'block'
    }
  }
</script>